<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            height:170px;
            background: darkcyan;
        }
        table{
            border:1px solid #000;
        }
        td{ 
            border:1px solid #000;
            padding:10px;
            text-align: center;
        }
        ul{
            list-style: none;
            display: flex;
            margin:0;
            padding:0;
        }
        li{
            width:200px;
            background: pink;
        }

        .zoom-enter-active{
            animation: zoomInDown .9s;
        }

        .zoom-leave-active{
            animation: zoomOutDown .9s;
        }

    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <hr>
        <div v-if="false">
            <button @click="flag=true">表格展示</button>
            <button @click="flag=false">列表展示</button>
            <ctable :cars="cars" v-if="flag"></ctable>
            <clist :cars="cars" v-else></clist>
        </div>
        <select v-model="cptname">
            <option value="ctable">表格展示</option>
            <option value="clist">列表展示</option>
        </select>

        <transition name="zoom" mode="out-in">
            <keep-alive>
                <component :is="cptname" :cars="cars"></component>
            </keep-alive>
        </transition>
        
    </div>

    <template id="ctable">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>品牌</td>
                    <td>型号</td>
                    <td>颜色</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(l,key,i) in cars" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{l.brand}}</td>
                    <td>{{l.model}}</td>
                    <td>{{l.color }}</td>
                </tr>
            </tbody>
        </table>
    </template>

    <template id="clist">
        <ul>
            <li v-for="(l,key,i) in cars" :key="i">
                <p>序号:{{i+1}}</p>
                <p>品牌:{{l.brand}}</p>
                <p>型号:{{l.model}}</p>
                <p>颜色:{{l.color }}</p>
            </li>
        </ul>
    </template>
 
    <script>
        const bus = new Vue()  // 空的Vue 实例对象 
        Vue.component("myhead",{
            template:"<h2>wh2114 - 天天大声背面试题目 </h2>"
        })
        var cars = {
            car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"} ,
            car03 : {brand : "Volvo", model : "XC90", color : "black"}
        }
        Vue.component("ctable",{
            template:"#ctable",
            props:['cars'],
            mounted(){
                console.log("I am mounted table ")
            },
            destroyed(){
                console.log("I destroyed table ")
            },
            activated(){
                console.log("我被激活了...")
            },
            deactivated(){
                console.log("我被隐藏 失去活力了")
            }
        })
        Vue.component("clist",{
            template:"#clist",
            props:['cars']
        })
   
        
        const vm = new Vue({
            data:{
                title:"Vue component 动态组件切换",
                cars,
                flag:true,
                cptname:"ctable"
            },
            components:{
               
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
        component 官方组件
        is 属性   表示当前显示的组件 组件名称
        keep-alive  (记录滑动的高度)   失活的组件将会被缓存！   下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

        activated   激活
        deactivated 失活  
        
        transition 过渡组件 

        组件切换
        1. v-if
        2. v-show 
        3. component
        4. 路由 route 
     -->
</body>
</html>